<template>
  <div class="pay-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input clearable placeholder="请输入车牌号码" class="search-main" v-model="params.carNumber" @clear="search"></el-input>
      <span class="search-label">缴费状态：</span>
      <el-select v-model="params.paymentStatus"  placeholder="未选择">
        <el-option 
        v-for="item in statusList" 
        :key="item.value"
        :label="item.text"
        :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" class="search-btn" @click="search">查询</el-button>
    </div>
    <!-- 表格部分 -->
    <div class="table">
      <el-table style="width: 100%" :data="list" >
        <el-table-column type="index" label="序号" :index="indexMethod"/>
        <el-table-column label="车牌号码" prop="carNumber"/>
        <el-table-column label="收费类型" prop="chargeType" :formatter="formatRule1"/>
        <el-table-column label="停车总时长" prop="parkingTime"/>
        <el-table-column label="缴纳费用（元）" prop="actualCharge"/>
        <el-table-column label="缴纳状态" prop="paymentStatus" :formatter="formatRule2"/>
        <el-table-column label="缴纳方式" prop="paymentMethod" :formatter="formatRule3"/>
        <el-table-column label="缴纳时间" prop="paymentTime"/>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
        <!-- @current-change切换页码用的 -->
          <el-pagination
            layout="total, prev, pager, next"
            :total="total"
            :page-size="params.pageSize"
            @current-change="handleCurrentChange"
          />
      </div>
  </div>
</template>

<script>
import { parkingFeeListAPI } from '@/api/pay'
export default {
  name: 'Pay',
  data() {
    return {
      list: [],
      params: {
        page: 1,
        pageSize: 5,
        carNumber: '',
        paymentStatus: null
      },
      total: 0,
      form: {
        carNumber: '', //车牌号
        chargeType: '', //收费类型
        parkingTime: '',  //停车时间
        actualCharge: '',  //停车费
        paymentStatus: '',  //缴费状态
        paymentTime: '',  //缴费时间
        paymentMethod: ''  //缴费方式
      },
      statusList: [
        {
          text: '全部',
          value: null
        },
        {
          text: '待缴纳',
          value: '0'
        },
        {
          text: '已缴纳',
          value: '1'
        },
      ],
      chargeTypeList: [
        {
          label: '月卡',
          value: 'card'
        },
        {
          label: '临时停车',
          value: 'temp'
        }
      ],
      paymentStatusList: [
        {
          label: '未缴纳',
          value: '0'
        },
        {
          label: '已缴纳',
          value: '1'
        }
      ],
      paymentMethodList: [
        {
          label: '支付宝',
          value: 'Alipay'
        },
        {
          label: '微信',
          value: 'WeChat'
        },
        {
          label: '线下',
          value: 'Cash'
        },
      ]
    }
  },
  created() {
    this.parkingFeeList()
  },
  methods: {
    //对缴纳方式进行转化
    formatRule3(row, column, cellValue) {
      const rule = this.paymentMethodList.find(item => item.value === cellValue)
      return rule ? rule.label : '--'
    },
    //对表格中缴纳状态进行转换
    formatRule2(row, column, cellValue) {
      const rule = this.paymentStatusList.find(item => item.value === cellValue)
      return rule ? rule.label : '已缴纳'
    },
    //对收费类型进行转换
    formatRule1(row, column, cellValue) {
      const rule = this.chargeTypeList.find(item => item.value === cellValue)
      return rule ? rule.label : ''
    },
    //查询
    search() {
      this.params.page = 1
      this.parkingFeeList()
    },
    //分页
    handleCurrentChange(page) {
      // console.log(page)
      this.params.page = page
      this.parkingFeeList()
    },
    //计算序号
    indexMethod(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    //获取列表
    async parkingFeeList() {
      const res = await parkingFeeListAPI(this.params)
      // console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-container {
  padding: 20px;
  background-color: #fff;
}
.search-container {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(237, 237, 237, 0.9);
    padding-bottom: 20px;
    
}
.search-main {
    width: 220px;
    margin-right: 10px;
}
.search-btn {
  margin-left: 20px;
}
.page-container{
    padding:4px 0px;
    text-align: right;
}
</style>
